import CEcharts from '@/components/echarts'
import {chinaMapOption, getCityName} from '@/echarts/manage-chart-options'
import {getMap} from '@/api/visualLargeScreen'
import {colorLuminance} from '@/libs/neumorphism'
import cecharts from '@/libs/global/echarts'

// 给指定城市添加颜色
const cityColor = {
  广东: '#4e9cff',
  湖北: '#3ebdff',
  陕西: '#81daff',
  甘肃: '#b5e4ff',
  山西: '#348ac9',
  河北: '#a9d5ff',
  山东: '#a9d5ff',
  辽宁: '#95c6fe',
  吉林: '#b7d3fd',
  黑龙江: '#bee2f5',
  四川: '#bee2f5',
  广西: '#f3ffff',
  贵州: '#f2ffff',
  云南: '#d4fdff',
  江苏: '#1799ff',
  上海: '#31a3e5'
}

export const MapEchart = defineComponent({
  setup() {
    let echart: cecharts.ECharts

    const state = reactive<{
      adcodeHistory: number[]
      centerCityName: string
    }>({
      adcodeHistory: [],
      centerCityName: '浙江省'
    })

    // 地图zoom
    const mapGeoZoom = computed(() =>
      state.adcodeHistory.length === 0
        ? 1.4
        : state.adcodeHistory.length === 1
        ? 3
        : state.adcodeHistory.length === 2
        ? 5
        : 1.4
    )

    watch(
      () => state.adcodeHistory,
      n => {
        console.log('地图code历史记录变化', n)
      }
    )
    // async function beforeInit(ec: typeof cecharts) {
    //   //调用获取地图数据接口
    //   const res = await getMap({code: adcode + '_full'})
    //   if (!res) {
    //     return
    //   }
    //   if (res.result !== 'success') {
    //     return
    //   }

    //   // json序列化
    //   const geo = JSON.parse(res.data) as GeoJSON
    //   console.log(geo)
    //   // 注册地图
    //   // @ts-ignore
    //   echart.registerMap('china', geo)
    // }

    async function initEc(adcode = 100000) {
      //调用获取地图数据接口
      const res = await getMap({code: adcode + '_full'})
      if (!res) {
        return
      }
      if (res.result !== 'success') {
        return
      }

      // json序列化
      const geo = JSON.parse(res.data) as GeoJSON
      console.log(geo)
      // 注册地图
      // @ts-ignore
      cecharts.registerMap('china', geo)
      // 重新设置geo的zoom
      console.log('当前地图zoom', mapGeoZoom.value)
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      chinaMapOption.geo.zoom = mapGeoZoom.value
      // 设置地图视角中心点
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      chinaMapOption.geo.center = geo.features.filter(
        item => item.properties.name === state.centerCityName
      )[0].properties.center
      // 给地图上色
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      chinaMapOption.geo.regions = geo.features
        .filter(item => item.properties.name)
        .map(item => {
          const color =
            cityColor[getCityName(item.properties.name) as keyof typeof cityColor] || '#d1f6ff'
          const lightColor = colorLuminance(color, 0.15)
          const darkColor = colorLuminance(color, -0.08)
          const areaColor = {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: color // 0% 处的颜色
              },
              {
                offset: 1,
                color: lightColor // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
          return {
            name: item.properties.name,
            itemStyle: {
              areaColor: areaColor,
              color: color
            },
            select: {
              itemStyle: {
                areaColor: areaColor, //悬浮区背景
                color: color,
                borderWidth: 5,
                borderColor: darkColor
              }
            },
            emphasis: {
              itemStyle: {
                areaColor: areaColor, //悬浮区背景
                color: color,
                borderWidth: 5,
                borderColor: darkColor
              }
            }
          }
        })
      // 给series中的map的data赋值，只需要data中的name与城市名称相同，便会自动匹配
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      chinaMapOption.series[0].data = geo.features
        .filter(item => item.properties.name)
        .map(item => item.properties)
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      chinaMapOption.series[1].data = geo.features
        .filter(item => item.properties.name)
        .map(item => (item.properties.center || [0, 0]).concat([Math.floor(Math.random() * 100)]))
      // 渲染地图option
      console.log(chinaMapOption)
      echart.setOption(chinaMapOption)
      //存储adcode历史 添加adcode到adcodeHistory
      state.adcodeHistory.push(adcode)
      console.log('state.adcodeHistory', state.adcodeHistory)

      // 绑定点击事件
      echart.on('click', e => {
        console.log('当前点击', e)
        if (e.seriesType === 'map') {
          console.log('该地图GeoJSON', geo)
          if (!e.data) {
            return
          }
          if (state.adcodeHistory.length >= 3) {
            return
          }
          // 取出地区数据
          const properties = e.data as GeoProperties
          console.log(properties)
          // 找到对应地区数据内的feature的properties的adcode
          const propertiedAdcode = properties.adcode
          // 取消之前绑定的点击和右击事件
          echart.off('click')
          echart.off('contextmenu')
          // 根据adcode获取地图数据并渲染
          initEc(propertiedAdcode)
        }
      })

      // 绑定右击事件
      echart.on('contextmenu', e => {
        console.log('当前右击', e)
        console.log('该地图GeoJSON', geo)
        // 历史记录第一个必须为100000，必须有值
        if (state.adcodeHistory.length <= 1) {
          return
        }
        // 获取历史记录最后一个
        state.adcodeHistory.splice(-1)
        const adcodeHistory = state.adcodeHistory.splice(-1)[0]
        console.log('adcodeHistory', adcodeHistory)
        // 历史记录最后一个如果没值就退出
        if (!adcodeHistory) {
          return
        }
        // 取消之前绑定的点击和右击事件
        echart.off('click')
        echart.off('contextmenu')
        // 根据adcodeHistory获取地图数据并渲染
        initEc(adcodeHistory)
      })
    }

    onMounted(() => {
      const cnmap = document.getElementById('cnmap')
      if (cnmap) {
        cnmap.oncontextmenu = e => {
          return false
        }
      }
    })

    return () => (
      <CEcharts
        id='cnmap'
        width='100%'
        height='100%'
        lazy={true}
        option={chinaMapOption}
        onInitEc={ec => {
          echart = ec
          initEc()
        }}
      ></CEcharts>
    )
  }
})
